<template>
  <PageTable
    v-bind="$attrs"
    :search-options="options"
    :columns="columns.filter((item) => item.checked)"
    @search="props.onSearch"
  >
    <template #searchCollapse>
      <slot name="searchCollapse"></slot>
    </template>
    <template #operate>
      <ASpace>
        <slot name="operateLeft"></slot>
        <div></div>
      </ASpace>
      <ASpace>
        <slot name="operateRight"></slot>
        <RDropdownCheckbox
          placement="bottomRight"
          v-model:value="columns"
          :fieldNames="{ label: 'title', value: 'key', checked: 'checked' }"
        >
          <AButton :icon="h(AppstoreOutlined)"></AButton>
        </RDropdownCheckbox>
      </ASpace>
    </template>

    <template #bodyActionCell="{ record }">
      <slot name="bodyActionCell" :record="record"></slot>
    </template>
  </PageTable>
</template>

<script setup>
import { h, ref } from 'vue';
import { PageTable } from '@/components/templates';
import { RDropdownCheckbox } from '@/components/custom';
import { AppstoreOutlined } from '@ant-design/icons-vue';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  columnSelected: {
    type: Array,
    default: () => []
  },
  onSearch: Function,
  onSearchReset: Function
});

const options = [
  { label: '综合搜索', value: 'keyword', placeholder: '综合搜索' },
  { label: '用户名称', value: 'userName', placeholder: '请输入用户名称' },
  { label: '手机号码', value: 'phoneNumber', placeholder: '请输入手机号码' }
];

const selectedColumn = [
  { key: 'index', title: '序号', dataIndex: 'index' },
  { key: 'userId', title: '用户ID', dataIndex: 'userId' },
  { key: 'userName', title: '用户名称', dataIndex: 'userName' },
  { key: 'nickName', title: '用户昵称', dataIndex: 'nickName' },
  { key: 'phoneNumber', title: '手机号码', dataIndex: 'phoneNumber' },
  { key: 'statusName', title: '状态名称', dataIndex: 'statusName' },
  { key: 'createTime', title: '创建时间', dataIndex: 'createTime' },
  { key: 'action', title: '操作' }
].map((item) => ({ ...item, checked: props.columnSelected.includes(item.key) }));

const columns = ref(selectedColumn);
</script>

<style lang="scss" scoped></style>
